<template>
  <div id="manage">
    <div class="leftList">
      <p>字典</p>
      <div class="border"></div>
      <div class="severListDIv">
        <div class="severList" :class="{'active':searchParam.dictCode == item.value ?true:false}" v-for="(item, index) in Summarylist" :key="index" @click="refreshDict(item)">
          <span>{{item.label}}</span>
        </div>
      </div>
    </div>
    <div class="rightTable">
      <div class="condition">
        <el-button v-if="power.add" size="small" type="primary" @click="isDisabled=false;addOrEditLoad($operType.add)">字典值新增</el-button>
      </div>
      <el-table :data="tableData" stripe :max-height="tableMaxHeight" class="table">
        <el-table-column align="center" prop="code" label="编码" width="100" fixed="left">
          <template slot-scope="scope">
            <span @click="isDisabled = true;handleClick($operType.view, scope.row);" style="width: 100%; height: 100%; cursor: pointer; color: #22a6f2">{{ scope.row.code }}</span>
          </template>
        </el-table-column>
        <el-table-column v-for="(column, index) in columns" :fixed="column.fixed" :prop="column.prop" header-align="center" :align="column.align" :label="column.label" :min-width="column.width" :key="index" :render="render">
          <template slot-scope="scope">
            <expand v-if="column.render" :render="column.render" :row="scope.row" :index="index" :column="column"></expand>
            <span v-else>{{scope.row[column.prop]}}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="240" header-align="center" align="center" v-if="power.update || power.delete">
          <template slot-scope="scope">
            <el-button v-if="power.update" type="text" class="primaryTextBtn" @click="isDisabled=false;addOrEditLoad($operType.update,scope.row)">修改</el-button>
            <el-button v-if="power.delete" type="text" class="dangerTextBtn" @click="deleteData(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--右侧 字典值表单-->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="handleClose">
      <el-form :ref="ref" :model="formParam" label-width="110px" :rules="formParamRules" label-position="right">
        <el-row>
          <el-col :span="22">
            <el-form-item label="分类编码:" prop="dictCode">
              <el-input size="small" :disabled="isDisabled" v-model="formParam.dictCode" placeholder="请输入分类编码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="分类名称:" prop="dictName">
              <el-input size="small" :disabled="isDisabled" v-model="formParam.dictName" placeholder="请输入分类名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="字典编码:" prop="code">
              <el-input :disabled="isDisabled" size="small" v-model="formParam.code" placeholder="请输入字典编码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="字典名称:" prop="name">
              <el-input :disabled="isDisabled" size="small" v-model="formParam.name" placeholder="请输入字典名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="描述:" prop="description">
              <el-input :disabled="isDisabled" size="description" v-model.number="formParam.description" placeholder="请输入描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="有效标志" prop="enableFlag">
              <el-select :disabled="isDisabled" size="small" v-model="formParam.enableFlag" style="width:100%" placeholder="请选择有效标志">
                <el-option v-for="item in isEnableFlagList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="排序码:" prop="sortNum">
              <el-input type="number" :disabled="isDisabled" size="small" v-model.number="formParam.sortNum" placeholder="请输入排序码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button size="small" type="primary" @click="addOrEditSubmit()">确定</el-button>
      <el-button size="small" @click="dialogVisible=false">取消</el-button>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "sysDict",
    data() {
      // 获取按钮权限
      let power = {
        add: this.$util.btnShow("sysDict.add"), //新增
        update: this.$util.btnShow("sysDict.update"), //修改
        delete: this.$util.btnShow("sysDict.delete"), //删除
      }
      return {
        clientHeight: document.body.clientHeight, //窗口可视区域高度
        tableMaxHeight: 0, //表格的最大高度
        power: power, // 按钮显隐控制权限
        tableData: [],
        title: "",
        ref: "form",
        isDisabled: false, //表单是否可以编辑
        sendType: "", //add 表示新增  edit 表示编辑 view 表示预览
        Summarylist: [],
        columns: [
          { fixed: false, prop: "name", align: "center", label: "字典名称", width: "120", },
          { fixed: false, prop: "dictCode", align: "center", label: "类型", width: "120", },
          { fixed: false, prop: "description", align: "center", label: "描述", width: "150", },
          {
            fixed: false,
            prop: "enableFlag",
            align: "center",
            label: "有效标志",
            width: "80",
            render(h, param) {
              return h("div", param.row.enableFlag == 1 ? "是" : "否");
            },
          },
          { fixed: false, prop: "sortNum", align: "center", label: "排序码", width: "80", },
        ],
        dialogVisible: false, //表单对话框显隐
        //搜索条件
        searchParam: {
          dictCode: '',
          dictName: '',
          keyword: ''
        },
        // 新增编辑弹出表单
        formParam: {
          id: "", // 主键
          dictCode: "", // 字典编码
          dictName: "", // 类型名称
          code: "", // 编码
          name: "", // 名称
          description: "", // 描述
          enableFlag: "", // 有效标志
          sortNum: "", // 排序
        },
        formParamDefault: {
          id: "", // 主键
          dictCode: "", // 字典编码
          dictName: "", // 类型名称
          code: "", // 编码
          name: "", // 名称
          description: "", // 描述
          enableFlag: "", // 有效标志
          sortNum: "", // 排序
        },
        formParamRules: {
          dictCode: [{ required: true, message: "请输入字典类型编码", trigger: "blur" }],
          dictName: [{ required: true, message: "请输入字典类型名称", trigger: "blur" }],
          code: [{ required: true, message: "请输入字典值编码", trigger: "blur" }],
          name: [{ required: true, message: "请输入字典值名称", trigger: "blur" }],
          enableFlag: [{ required: true, message: "请选择有效标志", trigger: "change" }, ],
        },
        isEnableFlagList: [
          { value: 1, label: "是" },
          { value: 0, label: "否" },
        ],
      };
    },
    mounted() {
      var that = this;

      this.initDictList();
      this.$nextTick(function() {
        //设置表格的最大高度
        setTimeout(function() {
          that.tableMaxHeight = that.$util.setTableMaxHeight(true);
        }, 500);
      });
      window.onresize = () => {
        return (() => {
          window.clientHeight = document.body.clientHeight;
          that.clientHeight = window.clientHeight;
        })();
      };
    },
    watch: {
      clientHeight(val) {
        let that = this;
        setTimeout(function() {
          that.$nextTick(function() {
            heightSet();
            that.tableMaxHeight = that.$util.setTableMaxHeight(true);
          });
        }, 500);
      },
    },
    methods: {
      // 左侧字典查询
      initDictList() {
        let that = this;
        this.$req.get({}, api.urlSysDictListDict, function(_r) {
          that.Summarylist = _r.data;
          if (_r.data.length != 0) {
            that.searchParam.dictCode = that.Summarylist[0].value;
            that.searchParam.dictName = that.Summarylist[0].label;
          }
          that.refresh();
        });
      },
      refreshDict(e) {
        this.searchParam.dictCode = e.value;
        this.searchParam.dictName = e.label;
        this.refresh();
      },
      //刷新数据
      refresh() {
        let that = this;

        let param = new FormData();
        param.append("dictCode", this.searchParam.dictCode);
        this.$req.get(param, api.urlSysDictList, function(_r) {
          that.tableData = _r.data;
        });
      },
      handleClose(done) {
        done();
      },

      // 查看
      handleClick(operType, row) {
        this.title = "字典值" + operType.text;
        this.sendType = operType.key;
        this.dialogVisible = true;
        this.formParam = this.$util.clone_str(row);
      },
      // 表单初始化
      addOrEditLoad(operType, row) {
        var that = this;
        this.dialogVisible = true;
        this.title = "字典值" + operType.text;
        this.sendType = operType.key;
        if (operType.key == this.$operType.add.key) {
          this.formParam = this.formParamDefault;
          this.$util.formReset(this.formParam);
          this.formParam.dictCode = this.searchParam.dictCode;
          this.formParam.dictName = this.searchParam.dictName;
          this.formParam.enableFlag = 1;
        } else {
          var formParam = that.$util.clone_str(row);
          this.formParam = formParam;
        }
      },
      /*** sendType 来判断是新增还是编辑  add表示新增edit 表示编辑 */
      addOrEditSubmit() {
        var that = this;
        var param = {};
        var url = "";
        if (this.sendType == this.$operType.add.key) {
          url = api.urlSysDictAdd;
          param = this.$util.formData(this.formParam, this.formParamDefault, "id");
        } else {
          url = api.urlSysDictUpdate;
          param = this.$util.formData(this.formParam, this.formParamDefault);
        }
        this.$req.postForm(that.$refs[that.ref], param, url, function(_r) {
          that.$util.notify.success("操作成功！");
          that.dialogVisible = false;
          that.refresh();
        });
      },
      /** * 删除*/
      deleteData(row) {
        let that = this;
        this.$util.msgbox.confrim("是否删除该数据?", function() {
          let param = new FormData();
          param.append("id", row.id);
          that.$req.post(param, api.urlSysDictDelete, function(_r) {
            that.$util.notify.success("删除成功!");
            that.refresh();
          });
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  #manage {
    @include routerView;
  }

  .title {
    font-size: 28px;
    padding: 0 0 3% 0;
  }

  .list-tree-area {
    width: 20%;
    padding: 0 1% 1% 1%;
    // border-right: #354457 1px dashed;
    float: left;
    height: 100%;
    overflow-y: scroll;
  }

  .list-right-area {
    width: 75%;
    margin-left: 22%;
  }

  .condition {
    // float: left;
    text-align: left;
    width: 100%;
    // height: 10%;
    display: inline-block;
    margin-bottom: 10px;
  }

  .table {
    @include table;
  }

  .firstInput {
    @include inputLocation(270px);
    margin-left: 10px;
  }

  .leftList {
    width: 21%;
    padding: 10px 5px;
    float: left;
    height: 100%;
    overflow-y: hidden;
    position: relative;
    background-color: #ffffff;

    .severListDIv {
      height: 90%;
      overflow-y: scroll;
    }

    .severList {
      width: 100%;
      text-align: left;
      height: 40px;
      color: #169bd5;
      font-size: 14px;
      cursor: pointer;
      line-height: 40px;
      padding-right: 20px;
      padding-left: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      justify-content: space-between;
      align-items: center;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      color: #797979 !important;
    }

    .severList:hover {
      background-color: #ebedee !important;
    }

    .active {
      background-color: #e7e9eb !important;
    }

    .border {
      width: 100%;
      height: 1px;
      background: #c9cacc;
      margin: 10px 0;
    }

    p {
      line-height: 24px;
      font-size: 14px;
      color: #303133;
      text-align: left;
      font-weight: bold;
    }
  }

  .rightTable {
    width: 78%;
    height: 100%;
    margin-left: 22%;
    position: relative;
  }

  .firstInput {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .firstInput>.input {
    width: 45%;
    min-width: 120px;
    margin-right: 10px;
    flex-shrink: 0;
  }

  .condition:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
</style>